<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- J D Eisenberg -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple clip path</title>
  <link rel="stylesheet" type="text/css" href="../svg_style.css"/>
  <style type="text/css">
  svg { display: block; }
  </style>
  <script type="text/javascript" src="../svg_utils.js"></script>
  <script type="text/javascript">
// <![CDATA[ 
function showClip(isChecked)
{
  setAttr("unclipped", "style", "display:" +
    ((isChecked) ? "block" : "none"));
  setAttr("clipped", "style", "display:" +
    ((isChecked) ? "none" : "block"));
}

// ]]>
  </script>
</head>

<body>

<div id="svgOutput" style="margin-top: 1em">
<svg width="200" height="110" viewBox="0 0 200 110"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <clipPath id="rectClip">
    <rect id="rect1" x="15" y="15"
      width="40" height="45"
      style="stroke: gray; fill: none;"/>
  </clipPath>
  </defs>

  <g id="clipped" style="display: block">
  <!-- clip to rectangle -->
  <use xlink:href="minicat.svg#cat" style="clip-path: url(#rectClip);"/>
  </g>
  
  <!--
    for reference, show entire picture with clipping area outlined -->
  <g id="unclipped" style="display:none">
    <use xlink:href="#rect1"/>    <!-- show clip rectangle -->
    <use xlink:href="minicat.svg#cat"/>
  </g>
</svg>
</div>
<div>
<input type="checkbox" id="showClip"
  onclick="showClip(this.checked)" /> Show unclipped picture
</div>

</body>
</html>
